<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件通讯，动态引入组件，路由懒加载</title>
</head>
<body>
    <script>
      /**
       *  组件通讯  
       *      https://segmentfault.com/a/1190000019208626
       *     (.sync双向绑定，例如：<box :a.sync='aaa'></box>)
       *    1. props $emit
       *      a.父传子： 变量 :a='a'   函数@get='get' 
       *      b.子传父： this.$emit(get,"aaa") 事件的形式入参
       *  
       * 
       *    2.$emit/$on
       *      自定义事件
       * 
       * 
       *    3.vuex
       * 
       * 
       *    4.$attrs/$listeners
       *      $attrs指获取父传给子，但是子未在props中声明的值
       *      $listeners 指父传给子的所有非原生事件
       * 
       * 
       *    5.$parent/$children
       *      $parent父级实例
       *      $children子代实例（数组）
       * 
       * 
       *    6.provide/inject
       *       //传值无法响应
       *       //父
       *      export default {
       *        provide: {
       *         name: '浪里行舟'
       *        }
       *      }
       *      //子
       *      export default {
       *        inject: ['name'],
       *      }
       *      mounted () {
       *        console.log(this.name)
       *      }
       * 
       *      
       *      //传值可响应
       *       //父
       *      export default {
       *        data(){
       *          return:{
       *            name:'浪里行舟'
       *          }
       *        },
       *        provide(){
       *         return {
       *            theme:this //实例直接返回
       *          }
       *        }
       *      }
       *      //子
       *      export default {
       *        inject: {
       *          theme:{
       *            default: () => ({})
       *          }
       *        },
       *      }
       *      mounted () {
       *        console.log(this.injections.theme.name)
       *      }
       * 
       * 
      */

      /**
       *  动态引入组件（无需页面进入就import）
       *    
       *  <component :is="header" :name="flag ? '用户登录' : '用户注册'"></component>
       *  this.header = ()=>import('@vue/components/header.vue') 或者 this.header = (a)=>require([''@vue/components/header.vue'],a)
       * 
      */

      /**
       *  路由懒加载
       *  
       *  ()=>import('@vue/components/header.vue') 
       *  (a)=>require([''@vue/components/header.vue'],a)
       *  
       *  区别
       *  ()=>import('@vue/components/header.vue') 和 (a)=>require([''@vue/components/header.vue'],a) 在功能上是等价的
       *  import 使用的为 Promise而
       *  (a)=>require([''@vue/components/header.vue'],a) 仍在使用回调函数的方式入参a为回调函数
       * 
       * 
      */
    </script>
</body>
</html>